<template>
	<view class="shujia">
		<!-- 导航栏 -->
		<view class="shujia-nav">
			<view class="nav-title">我的书架</view>
			<view class="nav-item">
				<view><image src="/static/index/005.png" mode=""></image></view>
				<view>
					<view @click="change" v-if="hidden">编辑</view>
					<view :class="{active:show === true}" @click="change01" v-else>删除</view>
				</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<view class="show" v-show="isShow">
			<view class="shu-show" >
				<text @click="quXiao">取消</text>
				<u-checkbox-group>
					<u-checkbox v-model="value" shape="circle" @change="checkboxChange" :disabled="flag">全部</u-checkbox>
				</u-checkbox-group>
			</view>
		</view>
		<!-- 卡片 -->
		<my-zuijin :shulist="shuList"></my-zuijin>
		<!-- 书本列表 -->
		<view class="list">
			<shulist :list="list" :isShow="isShow" :isText="true" @active="active" @flagle="flagle" @del="del" ref="shulist"></shulist>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					// {
					// 	src:"../../static/index/4d102fb53380b24506d2c8714969b500.jpg",
					// 	title:"并不是我想穿女装",
					// 	show:false
					// },
					// {
					// 	src:"../../static/index/9ff87e26e02c772b3ba31f419fd5b6d0.jpg",
					// 	title:"突然之间心动了",
					// 	show:false
					// },
					// {
					// 	src:"../../static/index/6371755806dc66f96234bcb7fb6f326c.jpg",
					// 	title:"当happy不在身边",
					// 	show:false
					// },
					// {
					// 	src:"../../static/index/a0b4799404399400dd167365e95854e0.jpg",
					// 	title:"恰似寒光遇骄阳",
					// 	show:false
					// }
				],  //书本信息列表
				shuList:[
					{
						imgSrc:'/static/temp/item1.png',
						title:'陋室铭',
						geng:"更新至1288章",
						author:"刘禹锡 著",
						show:false,
						desc:`山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
						苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
						无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？
						山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。`
					}
				], //推荐数据
				isShow:false,//显示隐藏
				value:false,//复选框
				hidden:true, //控制编辑和删除的切换
				flag:false,  //是否禁用复选框 全部
			}
		},
		watch:{
			list:function(canshu){
				console.log(canshu)
				// this.shulist = null
				// this.shulist = canshu
			}
		},
		onShow(){
			this.isShow =false;
			this.hidden = true;
			this.flag = false;
			//console.log(this.list)
			let _this = this
			// uni.getStorage({  //获取本地存储
			//     key: 'storage_key',
			//     success: function (res) {
			//         console.log(res.data);
			// 		_this.list.push(res.data);
			// 		//console.log(_this.list)
			//     }
			// });
			try {   //获取本地存储
			    const value = uni.getStorageSync('storage_key');
				  if (Object.keys(value).length  == 0) {
							//判断存储的对象是否为空
				            //_this.list = []
				        } else {
							// _this.list = []
				            _this.list.push(value);
				        }
						//console.log(11111)
			} catch (e) {
			    // error
			}
			try {
			    uni.removeStorageSync('storage_key');
			} catch (e) {
			    // error
			}
			if(this.list.length == 0){
				this.flag = true
			}
		},
		methods: {
			toXiangqing(){ //跳转详情页
				//console.log(111)
				uni.navigateTo({
				    url: '../../pages/xiangqing/xiangqing'
				});
			},
			change(){  //转到编辑页面
				//console.log(1111)
				this.isShow =true;
				this.hidden =! this.hidden;
				this.value = false;
				this.list.forEach((item)=>{
					item.show = false
				})
			},
			change01(){  //点击删除功能
				//console.log(1111)
				let _this = this;
				uni.showModal({
				    content: '确认删除选中的作品吗？',
					cancelText:"再想想",
					cancelColor:"#9F9F9F",
					confirmText:"是的",
					confirmColor:"#E60606",
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
							_this.$refs.shulist.del();
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			del(){ //删除功能
				// this.$refs.shulist.del();
				var newData =[];
				this.list.forEach((val,index) => {
					if ( !val.show) {
						newData.push(val)
						//this.shulist.remove(index)
					}
				})
				this.list = newData;
				this.flag = true
			},
			quXiao(){  //点击取消
				this.hidden = true;
				this.isShow =false;
			},
			checkboxChange(){ //点击全选
				//console.log(111)
				if( !this.value){
					//调用子组件的方法
					this.$refs.shulist.quanXuan()
				}else{
					this.$refs.shulist.unquanXuan()
				}	
			},
			active(i){ //全选样式
				console.log(i)
				this.value = i
			},
			flagle(i){ //是否禁用复选框
				this.flag = i
			}
		}
	}
</script>

<style scoped lang="scss">
.shujia{
	padding: 140rpx 35rpx 0 34rpx;
	font-family: Microsoft YaHei;
	.show{
		width: 710rpx;
		height: 68rpx;
		background: rgba(255, 255, 255, 0);
		box-sizing: border-box;
		.shu-show{
			// background-color: #18B566;
			display: flex;
			justify-content: flex-end;
			text{
				font-size: 26rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #939393;
				line-height: 90rpx;
				margin-right: 25rpx;
			}
		}
	}
	.shujia-nav{
		display: flex;
		justify-content: space-between;
		height: 158rpx;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		padding: 78rpx 35rpx 0 34rpx;
		.nav-title{
			font-size: 46rpx;
			font-weight: bold;
			color: #2C2C2C;
		}
		.nav-item{
			display: flex;
			font-size: 30rpx;
			font-weight: bold;
			color: #000000;
			line-height: 50rpx;
			image{
				width: 38rpx;
				height: 38rpx;
				margin-right: 45rpx;
				margin-top: 5rpx;
			}
		}
	}
	
}
</style>
